<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html  lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>注册</title>
    <link href="static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="static/css/style.css" rel="stylesheet"/>
    <link href="static/css/login.min.css" rel="stylesheet"/>
    <link href="static/ruoyi/css/ry-ui.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="favicon.ico"/>
    <style type="text/css">
        .signin-panel{
            width: 70%;
            margin: 10% auto 0;
        }
    </style>
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
</head>

<body class="signin">

<div class="signin-panel">

    <div class="row">
        <div class="col-md-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>注册</h5>
                </div>
                <div class="ibox-content">

                    <div class="main-content">
                        <form id="registerForm" class="form-horizontal">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">姓名：</label>
                                        <div class="col-sm-8">
                                            <input name="name" placeholder="请输入姓名"  class="form-control" type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">身份证号：</label>
                                        <div class="col-sm-8">
                                            <input name="idCard" placeholder="请输入身份证号" class="form-control" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">手机号码：</label>
                                        <div class="col-sm-8">
                                            <input name="phone" placeholder="请输入手机号码" class="form-control" type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">邮箱：</label>
                                        <div class="col-sm-8">
                                            <input name="email" class="form-control" type="email"  placeholder="请输入邮箱">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">登录密码：</label>
                                        <div class="col-sm-8">
                                            <input id="password" name="password" placeholder="请输入登录密码" class="form-control" type="password">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">确认密码：</label>
                                        <div class="col-sm-8">
                                            <input name="confirm_password" placeholder="请输入确认密码" class="form-control" type="password">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">用户性别:</label>
                                        <div class="col-sm-8">
                                            <div class="input-group" style="width: 100%">
                                                <select name="sex" class="form-control m-b">
                                                    <option value="0">男</option>
                                                    <option value="1">女</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">个人地址:</label>
                                        <div class="col-sm-8">
                                            <textarea name="address" class="form-control"  style="resize:none" ></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="btn-group pull-right" role="group">
                                        <button id="registerSubmitBtn" class="btn btn-primary" type="submit">立即注册</button>
                                        <a href="login.jsp" class="btn btn-default" role="button">返回</a>
                                        <button class="btn btn-danger" type="reset">重置</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>


<script src="static/js/jquery.min.js"></script>
<script src="static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/ajax/libs/layer/layer.min.js"></script>
<script src="static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="static/ruoyi/js/ry-ui.js"></script>
<script>


    $(function() {
        validateRule();
    });

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#registerForm").validate({
            rules: {
                name: {
                    required: true,
                    minlength : 2
                },
                password: {
                    required: true,
                    minlength : 6,
                    maxlength : 18
                },
                confirm_password: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"
                },
                address : {
                    required: true
                },
                phone : {
                    required: true,
                    isPhone : true
                },
                idCard : {
                    required: true,
                    isIdCard : true
                },
                email : {
                    required: true,
                    email : true
                }
            },
            messages: {
                name: {
                    minlength : icon + "姓名至少为两位哦"
                },
                password: {
                    required: icon + "请输入您的密码",
                    minlength : icon +"密码长度不能低于6位",
                    maxlength : icon +"密码长度不能高于18位"
                },
                confirm_password:{
                    equalTo : "两次密码不一致"
                },
                email: "请输入一个正确的邮箱",
            },
            submitHandler: function() {
                //此处写请求后台的ajax
                let data = $("#registerForm").serialize();
                $.ajax({
                	url:"register.do",
                	type:"POST",
                	data : data,
                	dataType : "json",
                    success : function (response) {
                    	$.modal.alert(response.message);
                    }                	  
                });
                
            }
        })
    }

    // 自定义验证
    jQuery.validator.addMethod("isIdCard", function(value, element) {
        let id = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
        return this.optional(element) || (id.test(value));
    }, "请正确填写您的身份证号");

    jQuery.validator.addMethod("isPhone", function(value, element) {
        let phone = /^1[3456789]\d{9}$/;
        return this.optional(element) || (phone.test(value));
    }, "请正确填写您的手机号");


</script>

</body>
</html>